<template>
  <div class="isTree">
    <!-- {{ QueryTreeList }} -->
    <!-- {{ ticked }} -->
    <q-form ref="editRef">
      <q-tree
        ref="treeRef"
        v-if="QueryTreeList.length > 0"
        class="col-12 col-sm-6"
        :nodes="QueryTreeList"
        node-key="id"
        tick-strategy="strict"
        v-model:selected="selected"
        v-model:ticked="ticked"
        default-expand-all
      >
        <template #default-header="prop">
          <div class="row items-center">
            <div class>{{ prop.node.name }}</div>
          </div>
        </template>
      </q-tree>
    </q-form>
  </div>
</template>

<script lang="ts" setup>
import emitter from '@/components/eventbus';
import { ruleset } from '@/api/basic';
import { useQuasar } from 'quasar';
import _ from 'lodash';

interface Props {
  treeList?: [];
  tickedTree?: [];
  treeId?: number;
}
const props = withDefaults(defineProps<Props>(), {
  treeList: () => [],
  tickedTree: () => [],
  treeId: () => 0,
});
const $q = useQuasar();
const editRef = ref();
const selected = ref('Pleasant surroundings');
const treeRef = ref();
// setTimeout(() => {
//   console.log(
//     '11111111111',
//     treeRef.value.getNodeByKey(),
//     treeRef.value.getTickedNodes()
//     // treeRef.value.setExpanded()
//   );
// }, 4000);

//接收兄弟组件传递事件
emitter.on('saveData', async () => {
  console.log('saveDatasaveData');
  IsValidate();
});

//表单验证
const IsValidate = () => {
  if (editRef.value) {
    editRef.value.validate().then(async function (validate: any) {
      if (validate) {
        console.log('验证通过');
        onSubmit();
      } else {
        console.log('验证不通过');
      }
    });
  }
};

//提交数据
const onSubmit = async () => {
  // console.log('smsmsmsms', treeid.value, ticked.value);
  const res: any = await ruleset({ id: treeid.value, rules: ticked.value });
  info(res);
  console.log('授权角色', res);
};
//信息返回
const info = (res: any) => {
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    emit('backList');
  }
};

const QueryTreeList: any = computed({
  set(value: any) {
    // emit('update:form', value);
  },
  get() {
    console.log('props.treeList', props.treeList);
    return props.treeList;
  },
});

const emit = defineEmits(['update:tickedTree', 'backList']);

const ticked: any = computed({
  set(value: any) {
    console.log('tickedtickedtickedticked', value);
    emit('update:tickedTree', value);
  },
  get() {
    console.log('props.tickedTree', props.tickedTree);
    return props.tickedTree;
  },
});

const treeid: any = computed({
  set(value: any) {
    console.log('treeidtreeidtreeidtreeid', value);
  },
  get() {
    console.log('props.treeId', props.treeId);
    return props.treeId;
  },
});
</script>
<style scoped lang="scss">
.isTree {
  height: calc(100vh - 135px);
  overflow: auto;
  padding: 20px 20px 0 20px;
}
</style>
